class: center, middle, inverse, title-slide .title[ # Introduction to Making
Presentation Slides with xaringan ] .subtitle[ ## APEC Skill Seminar ] .author[ ### Shunkei Kakimoto ] .date[ ### 2024-04-30 ] --- class: middle .content-box-yellow[**A Useful tip:**] hitting letter "o" key will give you a panel view of the slides --- class: middle ## Today's Outline 1.[Introduction: What is xaringan and why it could be your best friend?](#intro) 2.[Examples of xaringan slides](#falvor) 3.[How to make presentation slides with xaringan?](#how) 4.[Extensions for xaringan presentations](#extension) 5.[Introduction to quarto revealjs slides by Matt](#quarto) <br> **Source materials for this session:** + Xie Allaire et al. (2018) ["R markdown: The definitive guide"](https://bookdown.org/yihui/rmarkdown/#ref-xie2015) --- class:center, middle name: intro # Introduction: What is xaringan? <div style='float:left'></div><hr color='#ffcc33' size=2px width=800> --- background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/be/Sharingan_triple.svg) background-size: 90px background-position: 90% 5% class: middle ## Sharingan (写輪眼) .center[ .blockquote[ <img src="images/xaringan-2-1.png" width="75%" style="display: block; margin: auto;" /> .right[-- <cite>[Xie (2021), Slide#41](https://slides.yihui.org/xaringan/#41)</cite>] ] ] .pull-right[<img src="https://media1.tenor.com/m/jANWn2UhNeAAAAAC/itachi-sharingan.gif" width="350" height="250"/>] <!-- https://media1.tenor.com/m/GeZQuGDMxZEAAAAC/macromatical-rhinoverse.gif --> --- background-image: url(https://presentable-user2021.netlify.app/packages/xaringan/featured-hex.png) background-size: 100px background-position: 90% 8% class: middle ## What does xaringan do? .blockquote[ The xaringan package is an R Markdown extension based on the JavaScript library remark.js to generate HTML5 presentations. ] <br> Multiple components are involved to create cool HTML5 slides. -- 1. remark.js (JavaScript
+ Markdown
) -- 2. <b>xaringan</b> connects remark.js to R markdown. --
See [this blog](https://yihui.org/en/2017/08/why-xaringan-remark-js/) for more about *xaringan/ remark.js*. --- class: middle ## Why xaringan might be your new presentation tool? I like xaringan presentations mainly because...
You can write everything in R Markdown. --
You can easily incorporate figures and tables created with
: +
You can work on figures and tables within the xaringan .Rmd file. +
or, if you have .Rmd file that contain all figures and tables you used in writing your paper, you can directly call those objects by loading the file in the xaringan .Rmd file. ````markdown ```{r, include = FALSE} knitr::knit_child("PrepareResults.rmd", quiet = TRUE) ``` ```` --- class: middle ### Furthermore... In terms of its functionality,
There are many awesome functionalities in xaringan! For example, `code highlighter` and `clipboard`. For lab session involving coding, these functions are helpful for both instructors and students. -- <br>
xaringan slides allow interactive presentations, which potentially make your presentation more intriguing and fun! --- class: center, middle name: falvor # Examples of xaringan Presentations <div style='float:left'></div><hr color='#ffcc33' size=2px width=800> --- class: middle .medium[ ```r # Header 1 ## Header 2 ### Header 3 + Item 1 + Item 2 **emphasized text** *italic text* ``` ] # Header 1 ## Header 2 ### Header 3 + list 1 + list 2 **emphasized text** *italic text* --- class: middle ## Columns and Content color boxes .medium[ ````markdown .pull-left[ this text is shown in the left column .content-box-blue[text in blue box ...] .content-box-red[text in red box ...] ] .pull-right[ this text is shown in the right column .content-box-yellow[text in green box ...] .content-box-yellow[text in yellow box ...] ] ```` ] .pull-left[ this text is shown in the left column .content-box-blue[text in blue box ...] .content-box-red[text in red box ...] ] .pull-right[ this text is shown in the right column .content-box-green[text in green box ...] .content-box-yellow[text in yellow box ...] ] --- class: middle # Math LaTeX commands works fine (most of the time). For example, <br> .content-box-yellow[Example 1: Inline equations] ````markdown $\omega_1=(6,10)$ and $\omega_2=(6,0)$ ```` `\(\omega_1=(6,10)\)` and `\(\omega_2=(6,0)\)` <br> .content-box-yellow[Example 2: Equations] ````markdown $$U_j(x_j, y) = x_j + \theta_j ln \, y$$ ```` `$$U_j(x_j, y) = x_j + \theta_j ln \, y$$` --- class: middle # Math .content-box-yellow[Example 3: Equations] ````markdown \begin{aligned} \max_{x_1,y_1} \quad & U_1(x_1, y_1)=x_1y_1 \\ \textrm{s.t.} \quad & max[x_2, y_2] = \overline{u_2} \\ & x_1 + x_2 = 16 \\ & y_1 + y_2 = 16 \end{aligned} ```` `\begin{aligned} \max_{x_1,y_1} \quad & U_1(x_1, y_1)=x_1y_1 \\ \textrm{s.t.} \quad & max[x_2, y_2] = \overline{u_2} \\ & x_1 + x_2 = 16 \\ & y_1 + y_2 = 16 \end{aligned}` --- class: middle ## Figures .content-box-yellow[Examples: Jensen's inequality] .panelset[ .panel[.panel-name[Example 1 : g(x) is convex] <img src="images/convex.png" width="50%" style="display: block; margin: auto;" /> `$$\color{darkgreen}{g(E[X])} \leq \color{blue}{E[g(X)]}$$` ] .panel[.panel-name[Example 2: g(x) is concave] <img src="images/concave.png" width="50%" style="display: block; margin: auto;" /> `$$\color{blue}{E[g(X)]} \leq \color{darkgreen}{g(E[X])}$$` ] ] --- class: middle ## Figure: Create maps with `leaflet`
--- class: middle ## Tables For example, regression results can be shown like this. .panelset[ <!-- Panel 1 --> .panel[.panel-name[Code] .small-code[ ```r library(modelsummary) library(gt) # === Load Data === # url <- 'https://vincentarelbundock.github.io/Rdatasets/csv/HistData/Guerry.csv' dat <- read.csv(url) # === Run regressions === # models <- list( "OLS 1" = lm(Donations ~ Literacy + Clergy, data = dat), "OLS 2" = lm(Crime_pers ~ Literacy + Clergy, data = dat), "OLS 3" = lm(Crime_prop ~ Literacy + Clergy, data = dat) ) ``` ```r # === Report results with modelsummary === # modelsummary( models, fmt = "%.2f", gof_map = c("nobs", "r.squared"), stars = TRUE, notes = list("You can leave a note here"), output = "gt" ) %>% tab_options(table.font.names = "Times New Roman") ``` ] ] <!-- Panel 2 --> .panel[.panel-name[Regression result] .small-code[
OLS 1
OLS 2
OLS 3
(Intercept)
7948.67***
16259.38***
11243.54***
(2078.28)
(2611.14)
(1011.24)
Literacy
-39.12
3.68
-68.51***
(37.05)
(46.55)
(18.03)
Clergy
15.26
77.15*
-16.38
(25.74)
(32.33)
(12.52)
Num.Obs.
86
86
86
R2
0.020
0.065
0.152
+ p < 0.1, * p < 0.05, ** p < 0.01, *** p < 0.001
You can leave a note here
] ] ] --- class: middle ## Animation with `gganimate` .content-box-yellow[Example 1: PDF and CDF] .center[ <img src="https://shunkei3.github.io/APEC_xaringanPresentations/xaringan/images/cdf_pdf.gif" width="600" height="350"/> ] .medium[ `\begin{align*} \color{blue}{CDF}:& \, F(x) = Pr(X \leq x) = \int_{-\infty}^x f(t) dt \\ \color{blue}{PDF}:& \, f(x) = \frac{d}{dx}F(x) \quad \text{by definition of PDF} \end{align*}` ] --- class: middle ## Animation with `gganimate` .content-box-yellow[Example 2: Measurement error bias in linear regression] <img src="index_files/figure-html/unnamed-chunk-11-1.gif" width="80%" style="display: block; margin: auto;" /> --- class: middle ## Citations and references You can cite any source from your .bib file via [RefManageR](https://docs.ropensci.org/RefManageR/reference/Cite.html) package. You need to setup the `BibOptions` at the beginning of your slides like [this](https://github.com/yihui/xaringan/wiki/Bibliography-and-citations). -- <br> Then, use `Citet` or `Citep` to cite a source. .content-box-green[Example: `Citet`] ```r # For inline text citation `r Citet(bib, "xie2022")` created xaringan. ``` Xie (2022) created xaringan. .content-box-green[Example: `Citep`] ```r # For inline parenthetical citation The xaringan package `r Citep(bib, "xie2022")` is an R Markdown extension. ``` The xaringan package (Xie, 2022) is an R Markdown extension. ??? + You can use bib file to create citations --- class: middle Then, put the following code in a r chunk in the final slides to show all the sources you cited. <br> ````markdown ```{r, results='asis', echo=FALSE} PrintBibliography(bib) ``` ````
Don't forget to put `results='asis', echo=FALSE` options in a chunk. --- class: middle ## Useful Shortcut Keys for presentation Hit `h` key on the slide. A list of shortcut keys will be popped up. To go back to the slides, hit `h` key again. <img src="images/short-cut.png" width="50%" style="display: block; margin: auto;" /> --- class: middle ## HTML to PDF slides `to_pdf` funtion of [renderthis](https://github.com/jhelvy/renderthis) package let you render xaringan HTML slides (or .Rmd) to pdf slides. For more detail, see [this](https://jhelvy.github.io/renderthis/articles/renderthis.html).
This function also works with .qmd of Quarto revealjs slides. <br> .medium-code[ ```r # === Install package === # remotes::install_github("jhelvy/renderthis", dependencies = TRUE) # === Get PDF slides from HTML slides === # renderthis::to_pdf( from = Path/to/an/.Rmd file, # .qmd, .html file, or a UR complex_slides = TRUE, partial_slides = TRUE ) ``` ] --- class: middle, center <img src="https://y.yarn.co/800c72bf-f939-4c9a-acc0-909b6969027a_text.gif" width="600" height="450"/> --- class:center, middle name: how # How to get start to make xaringan presentations? <div style='float:left'></div><hr color='#ffcc33' size=2px width=800> --- class: middle Open your RStudio IDE. .panelset[ <!-- Panel 1 --> .panel[.panel-name[Instatall package] If you haven't installed the packages yet: .medium-code[ ```r # === install xaringan === # remotes::install_github("yihui/xaringan") ``` ] ] <!-- Panel 2 --> .panel[.panel-name[Generate template slides] .pull-left[ From top-down of New file icon, crick <span style="color:blue">R Markdown</span>. <img src="images/select-Rmd.png" width="60%" style="display: block; margin: auto;" /> ] .pull-right[ <span style="color:blue">From template</span> → select <span style="color:blue">Ninja Presentation</span> <img src="images/select-xaringan.png" width="80%" style="display: block; margin: auto;" /> ] ] <!-- Panel 3: Knit --> .panel[.panel-name[Compile the file] .left3[ Then, crick the <span style="color:blue">knit</span> button. ] .right7[ <img src="images/knit.png" width="80%" style="display: block; margin: auto;" /> ] ] <!-- Panel 4: Output --> .panel[.panel-name[Output]
<!-- ```{r, fig.dim = c(4, 7), out.width = "80%"} knitr::include_graphics("images/final-slide.png") ``` --> ] ] --- class: middle ## Basic components of xaringan slides + `class` : + `---` : Every new slide is created under three dashes. + `--`: to build incremental slides [here](https://slides.yihui.org/xaringan/incremental.html#2) + ???: for presentation notes --- class: middle ## YAML header Likewise usual Rmd, YAML header determines the basic structure of the document. .panelset[ .panel[.panel-name[Template] .small-code[ ```r --- title: "Presentation Ninja" subtitle: "⚔<br/>with xaringan" author: "Yihui Xie" institute: "RStudio, PBC" date: "2016/12/12 (updated: `r Sys.Date()`)" output: xaringan::moon_reader: lib_dir: libs nature: highlightStyle: github highlightLines: true countIncrementalSlides: false --- ``` ] ] .panel[.panel-name[Add your "own" CSS] .small-code[ ```r --- title: "Introduction to Making <br> Presentation Slides with xaringan" subtitle: "APEC Skill Seminar" author: "Shunkei Kakimoto" date: "`r Sys.Date()`" output: xaringan::moon_reader: lib_dir: libs css: - css/umn-style.css - css/umn-style-fonts.css - css/my-style.css nature: highlightStyle: github highlightLines: false highlightLanguage: ["r"] countIncrementalSlides: false ratio: "15:11" --- ``` ] ] ] --- class: middle ## What's CSS? **CSS**: <b>C</b>ascading <b>S</b>tyle <b>S</b>heet
: CSS makes the appearance of your slides stylish.
: Creating or modifying a CSS file is a daunting task... ??? + --- class: center, middle name: extension # Extensions for xaringan presentations <html><div style='float:left'></div><hr color='#EB811B' size=1px width=800px></html> --- background-image: url(https://presentable-user2021.netlify.app/packages/xaringanthemer/featured-hex.png) background-size: 100px background-position: 95% 2% class: middle, animated slideInLeft fadeOutRight ## xariganthemer For more detail about `xariganthemer` package, see [this](https://pkg.garrickadenbuie.com/xaringanthemer/index.html). creates a css file with your favorite theme. .medium-code[ ```r # === Installation === # remotes::install_github("gadenbuie/xaringanthemer") ``` ] For example, using `style_duo_accent()`, .medium-code[ ```r style_duo_accent_inverse( primary_color = "#035AA6", secondary_color = "#03A696" ) ``` ] you can make slides looks like this <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo_accent_inverse.png" width="80%" style="display: block; margin: auto;" /> --- background-image: url(https://presentable-user2021.netlify.app/packages/xaringanextra/featured-hex.png) background-size: 100px background-position: 90% 30% class: middle, animated slideInRight fadeOutLeft ## xaringanExtra `xaringanExtra` package (Check [here](https://pkg.garrickadenbuie.com/xaringanExtra/#/README?id=xaringanextra)) offers extentional functionalities to `xaringan` slides. .medium-code[ ```r # === Installation === # remotes::install_github("gadenbuie/xaringanExtra") ``` ] <br> Let's see some of the functions in the next slide! --- class: middle, animated, slideInRight, bounceOutDown ## xaringanExtra .panelset[ <!-- Panel 1: Tile View--> .panel[.panel-name[Tile View] Press `o` key on the slide below.
] <!-- Panel 2: Panelset --> .panel[.panel-name[Panelset]
] <!-- Panel 3: Clipboard --> .panel[.panel-name[Clipboard]
] <!-- Panel 4: Extra Styles --> .panel[.panel-name[Extra Styles]
] <!-- Panel 5: Animate.css --> .panel[.panel-name[Animate.css]
] ] --- class: middle background-image: url(https://i3.ytimg.com/vi/DoRR2S5lLvk/maxresdefault.jpg) background-size: 200px background-position: 90% 5% ### webR Extension for Quarto Check [this](https://github.com/coatless/quarto-webr?tab=readme-ov-file) out. Below is an [example slides](https://tmieno2.github.io/R-as-GIS-workshop/vector_basics.html#/title-slide) using Quarto and webR:
--- class: center, middle ### Thank you! You can get my xaringan templates from [
@shunkei3](https://github.com/Shunkei3/APEC_xaringanPresentations)